﻿@using Stamp_For_Africa_Version_2.Models
@model Stamp_For_Africa_Version_2.ViewModels.StampDetailsViewModel
			
<input type="hidden" id="StampId" name="StampId"/>
    
<script type="text/javascript">


	$(function() {
	  $("#toolbox").tabs({

	    });
	});

	$(function () {
	  $(".navbutton1").button({

	  });
	});
	
	// =======================================================
	//	Show dialog functions
	// =======================================================
	//	Add to my collection
	function showAddToMyCollectionDialog(sId) {
	  $('#StampId').val(sId);
	  $('#dialogAddToMyCollection').dialog({ width: 400 });
	  return false;
	}

	//	Remove from my collection
	function showRemoveFromMyCollectionDialog(sId) {
	  $('#StampId').val(sId);
	  $('#dialogRemoveFromMyCollection').dialog({ width: 400 });
	  return false;
	}

	//	Delete from my collection
	function showDeleteFromMyCollectionDialog(sId) {
	  $('#StampId').val(sId);
	  $('#dialogDeleteFromMyCollection').dialog({ width: 400 });
	  return false;
	}


	function showCommentDialog(sId) {
	  $('#StampId').val(sId);
	  $('#addCommentDialog').dialog({ width: 500, modal: true });
	  return false;
	}

	function showStampTypeDialog() {
	  $('#stampTypeDialog').dialog({ width: 700, modal: true });
	  return false;
	}

	function showSxSComparisonDialog(parentId, childId) {

		var nSource = "/Stamps/ShowStamp/" + childId;		
		$("#SxSStamp2").attr("src", nSource);
		console.log($("#SxSStamp2").attr("src"));
		$('#SxSComparisonDialog').dialog({ width: 1024, modal: true });
		return false;
		
	}	
	
	// =======================================================
	//	Callback functions
	// =======================================================
	//	Add to my collection
	function onAddStampToCollection() {

	  var stampId = $('#StampId').val();
	  var mintNh = $('#MNH').val();
	  var mintH = $('#MH').val();
	  var used = $('#Used').val();
	  $.ajax(
	    {
	      type: 'POST',
	      url: '/Stamps/AddStampToCollection',
	      data: { stampId: stampId, MintNH: mintNh, MintH: mintH, Used: used },
	      dataType: "json",

	      success: function(data, response) {
	        $("#dialogAddToMyCollection").dialog("close");
	      }
	    });

	  return false;
	}

	// ======================================================
	//	Remove from my collection
	// ======================================================
	function onRemoveStampsFromCollection() {

	  var stampId = $('#StampId').val();
	  var mintNh = $('#RemMNH').val();
	  var mintH = $('#RemMH').val();
	  var used = $('#RemUsed').val();
	  $.ajax(
	    {
	      type: 'POST',
	      url: '/Stamps/RemoveStampsFromCollection',
	      data: { stampId: stampId, MintNH: mintNh, MintH: mintH, Used: used },
	      dataType: "json",

	      success: function(data, response) {
	        $("#dialogRemoveFromMyCollection").dialog("close");

	      }
	    });

	  return false;
	}

	// ======================================================
	//	Delete from my collection
	// ======================================================
	function onDeleteStampFromCollection() {

	  var stampId = $('#StampId').val();
	  $.ajax(
	    {
	      type: 'POST',
	      url: '/Stamps/DeleteStampsFromCollection',
	      data: { stampId: stampId },
	      dataType: "json",

	      success: function(data, response) {
	        $("#dialogDeleteFromMyCollection").dialog("close");

	      }
	    });

	  return false;
	}
	// ======================================================
	//	Cancel the delete
	// ======================================================
	function onDoNotDeleteStampFromCollection() {
	  $("#dialogDeleteFromMyCollection").dialog("close");
	  return false;
	}


	// ======================================================
	//	Post a comment
	// ======================================================
	function onPostComment() {

	  var comment = $("#Comment").val();
	  var stampId = $('#StampId').val();

	  $.ajax(
	    {
	      type: 'POST',
	      url: '/Stamps/PostCommentToStamp',
	      data: { stampId: stampId, scomment: comment },
	      dataType: "json",

	      success: function(data, response) {
	        $("#addCommentDialog").dialog("close");

	      }
	    });

	  return true;
	}

	function onCancelComment() {
	  $("#addCommentDialog").dialog("close");
	}

	$(function() {
	  $("#comments").accordion({ collapsible: true });
	});

	
</script>

@* Add to My Collection Dialog *@
<div style="display: none;" id="dialogAddToMyCollection" title="Add to my collection">  
  <div style="position: relative;">
    <table>
      <tr>
        <td>
          @Html.Label("Mint - Never hinged:") 
        </td>
        <td>
          @Html.TextBox("MNH")<br/>
        </td>
      </tr>
      <tr>
        <td>
          @Html.Label("Mint - Hinged:") 
        </td>
        <td>
          @Html.TextBox("MH")<br/>
        </td>
      </tr>
      <tr>
        <td>
          @Html.Label("Used:") 
        </td>
        <td>
          @Html.TextBox("Used")<br/>
        </td>
      </tr>

    </table>
    <a href="" onclick="return onAddStampToCollection(); ">Add to my collection!</a>
  </div>    
</div>


@* Remove from My Collection Dialog *@
<div style="display: none;" id="dialogRemoveFromMyCollection" title="Remove from my collection">  
  <div style="position: relative;">
    <table>
      <tr>
        <td>
          @Html.Label("Mint - Never hinged:") 
        </td>
        <td>
          @Html.TextBox("RemMNH")<br/>
        </td>
      </tr>
      <tr>
        <td>
          @Html.Label("Mint - Hinged:") 
        </td>
        <td>
          @Html.TextBox("RemMH")<br/>
        </td>
      </tr>
      <tr>
        <td>
          @Html.Label("Used:") 
        </td>
        <td>
          @Html.TextBox("RemUsed")<br/>
        </td>
      </tr>

    </table>
    <a href="" onclick="return onRemoveStampsFromCollection(); ">Remove from my collection!</a>
  </div>    
</div>

@* Delete from My Collection Dialog *@
<div style="display: none;" id="dialogDeleteFromMyCollection" title="Delete from my collection">  
  <div style="position: relative;">
    <p>Are you sure you want to remove this stamp from your collection completely?</p>

    <button onclick="return onDeleteStampFromCollection(); ">Yes, delete it</button>
    <button onclick="return onDoNotDeleteStampFromCollection(); ">No, leave it alone</button>
				
  </div>    
</div>


@* Add comment dialog *@
<div style="display: none; overflow: auto" id="addCommentDialog" title="Add a comment">  
  <div style="position: relative" >
    <p>Enter your comment here:</p>
    @Html.TextArea("Comment", new {style = "width:100%; height:300px"})

    <div style="display: block">
      <button onclick="return onPostComment(); ">Post it</button>
      <button onclick="return onCancelComment(); ">Leave it</button>
    </div>
  </div>    
</div>

@* Show stamp type dialog *@
<div style="display: none; overflow: auto" id="stampTypeDialog" title="Stamp type dialog">  
  <div style="position: relative" >
    @{

      String desc = @Model.GetStampTypeDescription(Model.Stamp.TypeId);
      @Html.TextArea("Description", desc, new {style = "width:100%; height:300px"})

    }

  </div>    
</div>

@* Side by Side Comparison dialog *@
<div style="display: none; overflow: auto" id="SxSComparisonDialog" title="Side by Side Comparison">  
  <div style="position: relative" >
    @{

      <img id="SxSStamp1" class="roundedpanel" alt ="" src='@Url.Action("ShowStamp", "Stamps", new { Model.Stamp.Id })' width="400" height=auto/>			
			<img id="SxSStamp2" class="roundedpanel" alt ="" src='@Url.Action("ShowStamp", "Stamps", new { Model.Stamp.Id })' width="400" height=auto/>			

    }

  </div>    
</div>


@{
	ViewBag.Title = Model.Stamp.DisplayName;
}
<div style="padding: 20px"></div>
<img alt ="" src='@Url.Action("ShowStamp", "Stamps", new { Model.Stamp.Id })' width="100" height=auto/>			
<h2 style="display: inline; vertical-align:top">@Model.Stamp.DisplayName</h2>

<p>
<div class="navbutton1">
  @Html.ActionLink("Back", "Index")
</div>
</p>

@* Toolbox *@

@{
	if (Model.Stamp.IsAVariation)
	{
		Stamp stamp = Model.Stamp.StampVariantParent;
		String variantText = "This stamp is a known variant of " + Model.Stamp.DisplayName;
		<div class="navbutton1">
			@Html.ActionLink(variantText, "Details", new { id = stamp.Id })
		</div>
	}
}

<div id="toolbox"  class="roundedpanel">

  @* TAB HEADINGS *@

  <ul>
    @{
      <li>
        <a href="#Overview">Overview</a>
      </li>

      <li>
        <a href="#Varieties">Varieties</a>
      </li>

      <li>
        <a href="#ControlBlock">Control block</a>
      </li>

      
    
			if (Model.GetLinkedMinaitureSheet != Guid.Empty)
			{
        <li>
          <a href="#MinatureSheet">Miniature sheet</a>
        </li>
			}


			if (@User.Identity.IsAuthenticated)
			{
        <li>			
          <a href="#YourCollection">Your collection</a>
        </li>
			}

    }    
  </ul>
  
  @* Overview Tab *@
  <div id="Overview">
    <table>
      <tr>
        <td>
          <legend>Image</legend>
        </td>
        <td>
          <legend>Details</legend>
        </td>
      </tr>
      <tr>
        <td>	
					<table>
						<tr>
							<td>
								<img class="roundedpanel" alt ="" src='@Url.Action("ShowStamp", "Stamps", new { Model.Stamp.Id })' width="400" height=auto/>			
							</td>
						</tr>
						@{				
							if (Model.Stamp.WatermarkId != null)
							{
								<tr>
									<td>
										<fieldset class="roundedpanel">
											<legend>Watermark</legend>

											<img alt ="" src='@Url.Action("ShowWatermark", "Watermark", new { id = Model.Stamp.WatermarkId })' width="400" height="200"/>			
										</fieldset>
									</td>
									
								</tr>
								
							}
						}
					</table>			
        </td>
        <td class="roundedpanel" style="width: 100%">
		
          <table>
            <tr>
              <td class="DetailsTable-Field">Country</td>
              <td class="DetailsTable-Entry">@Html.DisplayFor(model => model.Stamp.Country.Name)</td>
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Face Value</td>
              <td class="DetailsTable-Entry">@Html.DisplayFor(model => model.Stamp.FaceValue)</td>	
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Current Value (Mint - Never Hinged)</td>
              <td class="DetailsTable-Entry">@Html.DisplayFor(model => model.Stamp.ValueMintNeverHinged)</td>	
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Current Value (Mint - Hinged)</td>
              <td class="DetailsTable-Entry">@Html.DisplayFor(model => model.Stamp.ValueMintHinged)</td>	
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Current Value (Used)</td>
              <td class="DetailsTable-Entry">@Html.DisplayFor(model => model.Stamp.ValueUsed)</td>	
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Issued</td>
              @{
								var jusDate = Model.Stamp.FromDate.ToString();
                <td class="DetailsTable-Entry">@Html.Label(jusDate)</td>
              }
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Artist</td>
              <td class="DetailsTable-Entry">@Html.ActionLink(Model.Stamp.Artist.DisplayName, "Details", "Artists", new { id = Model.Stamp.ArtistId }, null)</td>	
            </tr>
            <tr>
              <td class="DetailsTable-Field ">Stamp Type</td>
         
              <td class="DetailsTable-Entry">
                <a onclick="return showStampTypeDialog()" href="#">@Html.DisplayFor(model => model.Stamp.StampType.DisplayName)</a>
          
          
              </td>	
            </tr>

            @{
							foreach (var catalogueEntry in Model.CatalogueEntries)
							{
                <tr>
                  <td class="DetailsTable-Field ">@catalogueEntry.Catalogue.CatalogName Catalogue</td>
                  <td class="DetailsTable-Entry">@catalogueEntry.CatalogueNumber</td>
			   	
                </tr>
							}
            }

          </table>

        </td>
      </tr>
    </table>

    <div id="description">
      <legend>Description</legend>
      <textarea style="width: 100%"  rows="10">@Model.Stamp.Description</textarea>
    </div>

    <div id="comments">
      @if (User.Identity.IsAuthenticated)
			{
        <button onclick=" return showCommentDialog('@Model.Stamp.Id')">Add new comment</button>
			}
	 
      @foreach (var comment in Model.StampComments)
			{
        <h3><a href="#">@comment.CommentDisplayName: @comment.DateTime</a></h3>
        <div href="#">
          @{
				int linecount = comment.Comment1.Count(u => u == '\n') + 2;
            <textarea style="width: 95%; resize: none; border: none" rows='@linecount' >@comment.Comment1</textarea>
          }
        </div>
			}
    </div>

  </div>

  @* Varieties Tab *@
  <div id="Varieties">
	<h2>Known variations</h2>
	@{	 	 
		List<Stamp> variationList = Model.GetStampVariations;
		<table>

		<tr>
			<td style="text-align: center; font-size:larger; text-decoration:underline">Name</td>
			<td style="text-align: center; font-size:larger; text-decoration:underline">Description</td>
			<td style="text-align: center; font-size:larger; text-decoration:underline">**</td>
			<td style="text-align: center; font-size:larger; text-decoration:underline">*</td>
			<td style="text-align: center; font-size:larger; text-decoration:underline">(u)</td>
			<td style="text-align: center; font-size:larger; text-decoration:underline"></td>
		</tr>

		@{foreach (var stamp in variationList)
		{
			<tr>
				<td>									
						@Html.ActionLink(@stamp.DisplayName, "Details", new { id = stamp.Id })				
				</td>
				<td>
					@stamp.ShortDescription
				</td>
				<td>
					@stamp.ValueMintNeverHinged
				</td>
				<td>
					@stamp.ValueMintHinged
				</td>
				<td>
					@stamp.ValueUsed
				</td>
				<td>
					<div class="navbutton1">
						<a href="#" onclick="return showSxSComparisonDialog('@Model.Stamp.Id', '@stamp.Id')">Show Side By Side Comparison</a>
					</div>
				</td>
			</tr>
		}}
		</table>
	}
  </div>

  @* ConrolBlock Tab *@
  <div id="ControlBlock">
    <img class="roundedpanel" alt ="" src='@Url.Action("ShowControlBlock", "Stamps", new { Model.Stamp.Id })' width="400" height=auto/>			
  </div>

  @* MinatureSheet Tab *@
  @{
		if (Model.GetLinkedMinaitureSheet != Guid.Empty)
		{

      <div id="MinatureSheet">
        @{
			Guid linkedStamp = Model.GetLinkedMinaitureSheet;

          <table style="width: 100%">
            <tr>
              <td style="width: 50%">
                <img class="roundedpanel" alt ="" src='@Url.Action("ShowStamp", "Stamps", new { id = linkedStamp })' width="400" height=auto/>			    
              </td>
              <td style="width: 50%; text-align: center">
              <div class="navbutton1">
                @Html.ActionLink("Go to details", "Details", new { id = linkedStamp })
                </div>
            </td>
          </tr>
        </table> 
      }    
  </div>
		}}
	@* Your Collection *@
	<div id="YourCollection">
	@{
		if (@User.Identity.IsAuthenticated)
		{
		<fieldset  class="roundedpanel">
			
			<p>You currently have a total of <b>@Model.Stamp.GetTotalCount()</b> of these stamps in your collection.</p>
			<table>
				<tr>
					<td class="DetailsTable-Field">Total of Mint-Never-Hinged</td>
					<td class="display-field">@Html.DisplayFor(model => model.Stamp.MintNeverHingedCount)</td>
				</tr>
				<tr>
					<td class="DetailsTable-Field">Total of Mint-Hinged</td>
					<td class="display-field">@Html.DisplayFor(model => model.Stamp.MintHingedCount)</td>
				</tr>
				<tr>
					<td class="DetailsTable-Field">Total of used</td>
					<td class="display-field">@Html.DisplayFor(model => model.Stamp.UsedCount)</td>
				</tr>
				<tr>
					<td class="DetailsTable-Field">Total value of the collection</td>
					<td class="display-field">@Html.DisplayFor(model => model.Stamp.ValueOfCollection)</td>
				</tr>
			</table>		
			<br/>
			<fieldset  class="roundedpanel">
			<legend> What would you like to do?</legend>
				<p><a href="" onclick="return showAddToMyCollectionDialog('@Model.Stamp.Id')">Add more of these stamps to your collection</a> </p>
				<p><a href="" onclick="return showRemoveFromMyCollectionDialog('@Model.Stamp.Id')">Remove some of these stamps from your collection</a></p>
				<p><a href="" onclick="return showDeleteFromMyCollectionDialog('@Model.Stamp.Id')">Remove this stamp completely</a></p>
				<p></p>			
				<p>Add this stamp to an album of yours</p>
			</fieldset>

		</fieldset>
	}
}

</div>

</div>




